<template>
  <view class="image-result-container">
    <view class="glass-card">
      <view class="title">AI生成结果</view>
      
      <!-- 四张生成图片展示 -->
      <view class="images-grid" v-if="generatedImages.length > 0">
        <view 
          class="image-item" 
          v-for="(image, index) in generatedImages" 
          :key="index"
          :class="{ 'selected': selectedIndex === index }"
        >
          <image 
            class="generated-image" 
            :src="image.imageUrl" 
            mode="aspectFit"
            @click="onselectImage(index)"
          ></image>
          <view class="checkmark" v-if="selectedIndex === index">✓</view>
        </view>
      </view>
      
      <!-- 加载状态 -->
      <view class="loading-container" v-if="isLoading">
        <view class="loading-spinner"></view>
        <text class="loading-text">正在生成图片...</text>
      </view>
      
      <!-- 选择图片后的操作区域（三按钮同一行） -->
      <view class="action-section actions-row" v-if="selectedIndex !== -1">
        <button class="download-image-btn" @click="downloadSelectedImage">下载图片</button>
        <button class="generate-text-btn" @click="generateTextContent" :loading="isGeneratingText" :disabled="isGeneratingText">{{ isGeneratingText ? '生成中...' : '生成文案' }}</button>
        <button class="video-btn" @click="handleGenerateVideo" :loading="isCreatingVideo" :disabled="isCreatingVideo">{{ isCreatingVideo ? '创建中...' : '生成视频' }}</button>
      </view>

      
      <!-- 生成的文案内容（点击生成后才显示） -->
      <template v-if="textContent && (textContent.line1 || textContent.line2 || textContent.line3 || textContent.line4)">
        <view class="text-title">推荐抖音分享文案</view>
        <view class="content-text" v-if="textContent?.line1" @longpress="copyText(textContent.line1)">{{ textContent.line1 }}</view>
        <view class="content-text" v-if="textContent?.line2" @longpress="copyText(textContent.line2)">{{ textContent.line2 }}</view>
        <view class="content-text" v-if="textContent?.line3" @longpress="copyText(textContent.line3)">{{ textContent.line3 }}</view>
        <view class="content-text" v-if="textContent?.line4" @longpress="copyText(textContent.line4)">{{ textContent.line4 }}</view>
      </template>

      <!-- 生成视频按钮（移动到文案框下方） -->
      <view class="video-action" v-if="selectedIndex !== -1">
        <button class="video-btn" @click="handleGenerateVideo" :loading="isCreatingVideo" :disabled="isCreatingVideo">
          {{ isCreatingVideo ? '创建中...' : '生成视频' }}
        </button>
      </view>
      
      
      
      <!-- 视频任务状态 -->
      <view class="video-status-section" v-if="videoTaskStatus">
        <view class="status-title">视频生成状态</view>
        <view class="status-info">
          <text class="status-text" :class="getStatusClass(videoTaskStatus.status)">
            {{ getStatusText(videoTaskStatus.status) }}
          </text>
        </view>
        <view class="video-result" v-if="videoTaskStatus.videoUrl">
          <text class="video-label">视频已生成完成</text>
          <view class="video-thumb" @click="openVideoPlayer">
            <video class="video-preview" :src="videoTaskStatus.videoUrl" :controls="false" :autoplay="false" muted></video>
            <view class="pause-icon">▶</view>
          </view>
          <button class="download-video-btn" @click="downloadVideo">长按视频下载</button>
        </view>
      </view>
      
      <!-- 错误信息 -->
      <view class="error-message" v-if="errorMessage">
        {{ errorMessage }}
      </view>
      
      <!-- 调试信息移除 -->
    </view>
  </view>


<view v-if="showVideoPlayer">
  <VideoPlayer :visible="showVideoPlayer" :src="videoTaskStatus.videoUrl" @close="showVideoPlayer=false" />
  

</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
import { 
  selectImage, 
  generateText, 
  createVideoTask, 
  pollVideoTaskStatus, 
  getCurrentUserId 
} from '@/services/api/backendApi'

// 响应式数据
const generatedImages = ref([])
const selectedIndex = ref(-1)
const isLoading = ref(false)
const isGeneratingText = ref(false)
const isCreatingVideo = ref(false)
const textContent = ref(null)
const videoTaskStatus = ref(null)
const errorMessage = ref('')
const currentSelectionId = ref(null)
const currentExhibitionId = ref(null)

// 新增：视频提示与播放器状态
const showVideoPlayer = ref(false)

// 页面加载时获取传递的图片数据
onMounted(() => {
  // 从页面参数或全局状态获取生成的图片数据
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  
  if (options.images) {
    try {
      generatedImages.value = JSON.parse(decodeURIComponent(options.images))
      
      // 尝试从本地存储恢复文案
      if (generatedImages.value.length > 0) {
        // 默认选择第一张图片
        selectedIndex.value = 0
        
        // 尝试恢复文案
        const firstImage = generatedImages.value[0]
        const cacheKey = `text_${firstImage.imageId}`
        const cachedText = uni.getStorageSync(cacheKey)
        
        if (cachedText) {
          // 兼容旧格式的缓存数据
          if (cachedText.cnCopy && cachedText.enCopy) {
            // 旧格式：中英文分开，需要按句号重新分割
            const combinedText = (cachedText.cnCopy || '') + (cachedText.enCopy || '')
            const sentences = combinedText.split(/[。.]/).filter(sentence => sentence.trim())
            textContent.value = {
              line1: sentences[0] || '',
              line2: sentences[1] || '',
              line3: sentences[2] || '',
              line4: sentences[3] || ''
            }
          } else {
            // 新格式：四行分割
            textContent.value = cachedText
          }
          console.log('从缓存加载文案:', cachedText)
        }
      }
      // 读取展览图片ID（用于视频生成的参考图片）
      if (options.exhibitionId) {
        try {
          currentExhibitionId.value = Number(options.exhibitionId)
        } catch(e) {}
      }
    } catch (error) {
      console.error('解析图片数据失败:', error)
      errorMessage.value = '获取图片数据失败'
    }
  }
})

// 长按复制文案
function copyText(text) {
  if (!text) return
  
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: '文案已复制',
        icon: 'success'
      })
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none'
      })
    }
  })
}

// 选择图片
function onselectImage(index) {
  selectedIndex.value = index
  // 重置其他状态
  textContent.value = null
  videoTaskStatus.value = null
  currentSelectionId.value = null
  errorMessage.value = ''
  
  // 尝试恢复选中图片的文案缓存
  if (index >= 0 && generatedImages.value[index]) {
    const selectedImage = generatedImages.value[index]
    const cacheKey = `text_${selectedImage.imageId}`
    const cachedText = uni.getStorageSync(cacheKey)
    
    if (cachedText) {
      // 兼容旧格式的缓存数据
      if (cachedText.cnCopy && cachedText.enCopy) {
        // 旧格式：中英文分开，需要按句号重新分割
        const combinedText = (cachedText.cnCopy || '') + (cachedText.enCopy || '')
        const sentences = combinedText.split(/[。.]/).filter(sentence => sentence.trim())
        textContent.value = {
          line1: sentences[0] || '',
          line2: sentences[1] || '',
          line3: sentences[2] || '',
          line4: sentences[3] || ''
        }
      } else {
        // 新格式：四行分割
        textContent.value = cachedText
      }
      console.log('恢复选中图片的文案缓存:', cachedText)
    }
  }
}

// 下载当前选择的图片
function downloadSelectedImage() {
  if (selectedIndex.value === -1) {
    uni.showToast({ title: '请先选择一张图片', icon: 'none' })
    return
  }
  const selectedImage = generatedImages.value[selectedIndex.value]
  if (!selectedImage?.imageUrl) return

  // 抖音/小程序/H5 统一处理
  uni.showLoading({ title: '下载中...' })
  uni.downloadFile({
    url: selectedImage.imageUrl,
    success: (res) => {
      const tempPath = res.tempFilePath
      if (!tempPath) {
        // H5 兜底
        try {
          const a = document.createElement('a')
          a.href = selectedImage.imageUrl
          a.download = 'image.jpg'
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          uni.showToast({ title: '开始下载', icon: 'success' })
        } catch (e) {
          uni.showToast({ title: '下载失败', icon: 'none' })
        }
        return
      }
      uni.saveImageToPhotosAlbum({
        filePath: tempPath,
        success: () => {
          uni.showToast({ title: '图片已保存', icon: 'success' })
        },
        fail: () => {
          uni.showToast({ title: '保存失败', icon: 'none' })
        }
      })
    },
    fail: () => {
      uni.showToast({ title: '下载失败', icon: 'none' })
    },
    complete: () => {
      uni.hideLoading()
    }
  })
}

// 生成文案内容
async function generateTextContent() {
  if (selectedIndex.value === -1) {
    uni.showToast({
      title: '请先选择一张图片',
      icon: 'none'
    })
    return
  }

  isGeneratingText.value = true
  errorMessage.value = ''
  
  try {
    // 先调用选择图片接口
    const selectedImage = generatedImages.value[selectedIndex.value]
    const selectResult = await selectImage(selectedImage.imageId)
    currentSelectionId.value = selectResult.selectionId
    
    // 生成文案内容
    const textResult = await generateText(selectResult.selectionId)
    // 解析中英（假设返回为“中文...English...”的拼接，这里简单根据首个连续英文字符拆分）
    const raw = textResult.momentsCopy || ''
    // 先按中文句号分割，再按英文句号分割
    const sentences = raw.split(/[。.]/).filter(sentence => sentence.trim())
    textContent.value = {
      line1: sentences[0] || '',
      line2: sentences[1] || '',
      line3: sentences[2] || '',
      line4: sentences[3] || ''
    }
    
    // 保存文案到本地存储
    const cacheKey = `text_${selectedImage.imageId}`
    uni.setStorageSync(cacheKey, textContent.value)
    
    uni.showToast({
      title: '文案生成成功',
      icon: 'success'
    })
  } catch (error) {
    errorMessage.value = `文案生成失败: ${error.message}`
    console.error('文案生成错误:', error)
  } finally {
    isGeneratingText.value = false
  }
}



// 分享内容 - 暂时注释掉
/*
function shareContent() {
  if (!textContent.value) return
  
  // 只分享朋友圈文案，因为图片简介暂不支持
  const shareText = textContent.value.momentsCopy || '暂无文案内容'
  
  uni.share({
    provider: 'weixin',
    type: 0,
    summary: shareText,
    success: () => {
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      })
    },
    fail: (error) => {
      console.error('分享失败:', error)
      // 降级到复制文本
      copyText(shareText)
    }
  })
}
*/

async function createVideo() {
  console.log('点击了生成视频按钮')  // 检查是否触发了函数

  if (selectedIndex.value === -1) {
    uni.showToast({
      title: '请先选择一张图片',
      icon: 'none'
    })
    console.log('未选择图片')  // 如果没有选择图片，输出日志
    return
  }

  isCreatingVideo.value = true
  errorMessage.value = ''
  
  try {
    const selectedImage = generatedImages.value[selectedIndex.value]
    console.log('选择的图片:', selectedImage)  // 输出选择的图片信息

    // 如果没有 selectionId，则需要先调用 selectImage 获取 selectionId
    if (!currentSelectionId.value) {
      console.log('currentSelectionId 不存在，调用 selectImage 获取')  // 日志记录
      const selectResult = await selectImage(selectedImage.imageId)
      console.log('selectImage 返回结果:', selectResult)  // 打印 selectImage 的返回结果
      currentSelectionId.value = selectResult.selectionId
    }

    console.log('当前 selectionId:', currentSelectionId.value)  // 输出当前 selectionId

    // 调用创建视频任务接口（使用展览图片作为参考图）
    const refId = currentExhibitionId.value || selectedImage.imageId
    const videoTaskResult = await createVideoTask(
      currentSelectionId.value,
      refId
    )
    
    console.log('创建视频任务接口返回结果:', videoTaskResult)  // 输出创建视频任务接口的返回结果

    // 获取任务 ID，判断是否有 taskId
    const taskId = videoTaskResult.taskId || videoTaskResult.data?.taskId
    console.log('视频任务 ID:', taskId)  // 输出任务 ID

    if (!taskId) {
      throw new Error('任务创建失败，未返回 taskId')
    }

    // 更新视频任务状态为排队中
    videoTaskStatus.value = { status: 1 }
    
    // 开始无限轮询视频状态
    const pollVideoStatus = async () => {
      try {
        const statusResult = await pollVideoTaskStatus(taskId, 2000, 1) // 每2秒轮询一次，只轮询1次
        console.log('视频状态轮询结果:', statusResult)
        
        if (statusResult.status === 3) {
          // 视频生成完成，跳转到视频结果页面
          videoTaskStatus.value = statusResult
          isCreatingVideo.value = false
          uni.showToast({ title: '视频生成完成', icon: 'success' })
          
          // 跳转到视频结果页面
          uni.redirectTo({
            url: `/pages/video-result/video-result?videoUrl=${encodeURIComponent(statusResult.videoUrl || '')}`
          })
          return
        } else if (statusResult.status === 4) {
          // 视频生成失败
          videoTaskStatus.value = statusResult
          isCreatingVideo.value = false
          uni.showToast({ title: '视频生成失败', icon: 'none' })
          return
        }
        
        // 继续轮询（无限轮询）
        setTimeout(pollVideoStatus, 2000)
      } catch (error) {
        console.error('轮询视频状态失败:', error)
        // 即使出错也继续轮询
        setTimeout(pollVideoStatus, 2000)
      }
    }
    
    // 开始轮询
    pollVideoStatus()
  } catch (error) {
    errorMessage.value = `视频生成失败: ${error.message}`
    console.error('视频生成错误:', error)  // 捕获错误并输出日志
  } finally {
    isCreatingVideo.value = false
  }
}

// 下载视频
function downloadVideo() {
  if (!videoTaskStatus.value?.videoUrl) return
  
  uni.downloadFile({
    url: videoTaskStatus.value.videoUrl,
    success: (res) => {
      uni.saveVideoToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          uni.showToast({
            title: '视频保存成功',
            icon: 'success'
          })
        },
        fail: () => {
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          })
        }
      })
    },
    fail: () => {
      uni.showToast({
        title: '下载失败',
        icon: 'none'
      })
    }
  })
}

// 获取状态文本
function getStatusText(status) {
  const statusMap = {
    1: '排队中',
    2: '处理中',
    3: '完成',
    4: '失败'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态样式类
function getStatusClass(status) {
  const classMap = {
    1: 'status-queuing',
    2: 'status-processing', 
    3: 'status-completed',
    4: 'status-failed'
  }
  return classMap[status] || 'status-unknown'
}

// 生成视频前弹提示，再调用原有createVideo
async function handleGenerateVideo() {
  if (selectedIndex.value === -1) {
    uni.showToast({
      title: '请先选择一张图片',
      icon: 'none'
    })
    return
  }

  const selectedImage = generatedImages.value[selectedIndex.value]
  
  // 跳转到视频生成页面，传递必要参数
  uni.navigateTo({
    url: `/pages/video-generating/video-generating?selectedImageId=${selectedImage.imageId}&exhibitionId=${currentExhibitionId.value || ''}`
  })
  // 不阻塞createVideo，用户点击“继续等待”时触发；为了更直接，这里也可直接调用：
  await createVideo()
}



// 处理图片收藏状态变化
// function onFavoriteChanged(data) {
//   const { imageId, isFavorited } = data
  
//   // 更新对应图片的收藏状态
//   const imageIndex = generatedImages.value.findIndex(img => img.imageId === imageId)
//   if (imageIndex !== -1) {
//     generatedImages.value[imageIndex].isFavorite = isFavorited
//   }
  
//   console.log(`图片 ${imageId} 收藏状态更新为: ${isFavorited}`)
// }

// 返回上一页
function goBackToUpload() {
  uni.navigateBack()
}
</script>

<style lang="scss">
.image-result-container {
  padding: 20px;
  min-height: 100vh;
  background: #000000;
}

.glass-card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.images-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 30px;
}

.image-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  min-height: 200px; /* 确保最小高度，防止挤压 */
  
  &.selected {
    border-color: #0FFDCD;
    box-shadow: 0 4px 20px rgba(15, 253, 205, 0.35);
    transform: scale(1.02); /* 选中时稍微放大，但不会挤压其他元素 */
    z-index: 1;
  }
}

.generated-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.checkmark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0FFDCD;
  color: #0c0c0c;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.image-actions { display: none; }

.select-btn { display: none; }

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #333;
  border-top: 3px solid #0FFDCD;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #ffffff;
  font-size: 16px;
}

.action-section { text-align: center; margin-bottom: 18px; }
.actions-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.generate-text-btn {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(236, 72, 153, 0.3);
  transition: all 0.3s ease;
  outline: none;
  &::after { border: none; }
  
  &:active {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
  }
}



.text-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 20px;
  text-align: center;
}

.text-item {
  background: rgba(60, 60, 80, 0.6);
  border-radius: 12px;
  padding: 15px 60px 15px 15px;
  margin-bottom: 8px;
  position: relative;
}

.text-label {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
  display: block;
}

.text-value {
  font-size: 14px;
  color: #e0e0e0;
  line-height: 1.6;
  margin-bottom: 15px;
  display: block;
  word-wrap: break-word;
  word-break: break-all;
}

.content-text {
  font-size: 14px;
  color: #ffffff;
  line-height: 1.6;
  background: linear-gradient(135deg, rgba(40, 40, 60, 0.9), rgba(30, 30, 40, 0.8));
  border-radius: 12px;
  padding: 15px;
  border-left: 4px solid #ec4899;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.2);
  font-weight: 500;
  margin-bottom: 6px;
  word-wrap: break-word;
  word-break: break-all;
}

.copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ec4899;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  min-width: 36px;
  height: 20px;
  line-height: 14px;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
    background: #db2777;
  }
}

.share-section {
  text-align: center;
  margin-top: 20px;
}

.share-btn {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 12px 25px;
  font-size: 14px;
  font-weight: 600;
}

.video-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(236, 72, 153, 0.1);
  border-radius: 15px;
}

.video-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 15px;
}

.video-action { text-align: center; margin: 12px 0 8px; }
.video-btn { background: linear-gradient(135deg, #ec4899, #f472b6); color: #fff; border: none; border-radius: 20px; padding: 12px 24px; font-size: 15px; font-weight: 600; box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3); outline: none; &::after { border: none; } }

.video-status-section {
  background: rgba(40, 40, 60, 0.6);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.download-image-btn { background: linear-gradient(135deg, #10b981, #34d399); color: #ffffff; border: none; border-radius: 18px; padding: 10px 16px; font-size: 13px; font-weight: 600; box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25); outline: none; &::after { border: none; } }

.status-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 15px;
  text-align: center;
}

.status-info {
  text-align: center;
  margin-bottom: 15px;
}

.status-text {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  
  &.status-queuing {
    background: #fbbf24;
    color: #000000;
  }
  
  &.status-processing {
    background: #60a5fa;
    color: white;
  }
  
  &.status-completed {
    background: #34d399;
    color: white;
  }
  
  &.status-failed {
    background: #f87171;
    color: white;
  }
}

.video-result {
  text-align: center;
}

.video-label {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 10px;
  display: block;
}

.download-video-btn {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
  outline: none;
  &::after { border: none; }
}

.error-message {
  background: #fee2e2;
  color: #ef4444;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  margin-top: 20px;
  border: 1px solid #fecaca;
}

.debug-info {
  margin-top: 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
}

.debug-text {
  display: block;
  margin-bottom: 5px;
}

/* 弹窗样式 */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 999; }
.modal-card { background: linear-gradient(135deg, rgba(40,40,60,0.95), rgba(30,30,40,0.95)); border-radius: 14px; padding: 18px; width: 80%; max-width: 320px; box-shadow: 0 8px 24px rgba(236,72,153,0.2); text-align: center; }
.modal-title { font-size: 16px; font-weight: 700; color: #ffffff; margin-bottom: 6px; }
.modal-sub { font-size: 13px; color: #d1d5db; margin-bottom: 12px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.gold-btn { background: linear-gradient(135deg, #ec4899, #f472b6); color:#ffffff; border:none; border-radius:18px; padding:8px 14px; font-size:13px; font-weight:600; }
.plain-btn { background: rgba(60,60,80,0.9); color:#ffffff; border:none; border-radius:18px; padding:8px 14px; font-size:13px; font-weight:600; }

.video-thumb { position: relative; width: 100%; max-width: 320px; margin: 0 auto 10px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.video-preview { width: 100%; height: 180px; object-fit: cover; filter: saturate(1.1) contrast(1.05); }

/* 视频完成弹窗样式 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.video-modal-content {
  background: linear-gradient(135deg, rgba(40, 40, 60, 0.95), rgba(30, 30, 40, 0.95));
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 25px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(236, 72, 153, 0.2);
}

.video-modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

.video-modal-close {
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.video-modal-close:hover {
  background: rgba(236, 72, 153, 0.2);
}

.video-container {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.video-player {
  width: 100%;
  height: 250px;
  border-radius: 12px;
}

.video-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.video-action-btn {
  padding: 12px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.download-btn {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  color: #ffffff;
  flex: 2;
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3);
}

.close-btn {
  background: linear-gradient(135deg, #4b5563, #6b7280);
  color: #ffffff;
  flex: 1;
}

.close-btn:hover {
  background: linear-gradient(135deg, #6b7280, #9ca3af);
}
.pause-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color:#ffffff; font-size: 36px; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }

.video-player-card { background: #111; border-radius: 12px; padding: 10px; width: 86%; max-width: 420px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 10px; }
.video-player { width: 100%; height: 220px; }

/* 抖音风格特效 */
.content-text {
  position: relative;
  overflow: hidden;
  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      rgba(236, 72, 153, 0) 0%,
      rgba(236, 72, 153, 0.1) 50%,
      rgba(236, 72, 153, 0) 100%
    );
    transform: rotate(30deg);
    animation: shimmer 3s infinite;
  }
}

@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(30deg); }
  100% { transform: translateX(100%) rotate(30deg); }
}

/* 抖音风格按钮动效 */
button:active {
  transform: scale(0.97);
  transition: transform 0.1s;
}

/* 抖音风格卡片悬浮效果 */
.image-item {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3);
  }
}

/* 添加抖音风格的文字效果 */
.title, .text-title {
  text-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
  letter-spacing: 0.5px;
}

/* 调整图标颜色 */
.pause-icon {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
</style>

<!-- 追加到模板末尾（在根容器内） -->
